<template>
  <div class="home">
    <div style="clear:both;"></div>
    <hr>
    <div class="map">
      <ul class="ulA">
        <li v-for="item in mapA" v-bind:class="{red: Object.keys(item.order).length > 0}" @click="clickPark(item)">
          {{ item.code }}
          <br>
          <span v-if="Object.keys(item.order).length > 0" style="font-size: smaller;">
            <p>{{ item.order.type }}</p>
            <p v-if="item.order.startTime">{{ item.order.startTime }}</p>
            <p v-if="item.order.endTime">{{ item.order.endTime }}</p>
            <p>{{ item.user.number }}</p>
          </span>
        </li>
      </ul>
      <div style="clear:both;"></div>
      <ul class="ulB">
        <li v-for="item in mapB" v-bind:class="{red: Object.keys(item.order).length > 0}" @click="clickPark(item)">
          {{ item.code }}
          <br>
          <span v-if="Object.keys(item.order).length > 0" style="font-size: smaller;">
            <p>{{ item.order.type }}</p>
            <p v-if="item.order.startTime">{{ item.order.startTime }}</p>
            <p v-if="item.order.endTime">{{ item.order.endTime }}</p>
            <p>{{ item.user.number }}</p>
          </span>
        </li>
      </ul>
      <div style="clear:both;"></div>
      <ul class="ulC">
        <li v-for="item in mapC" v-bind:class="{red: Object.keys(item.order).length > 0}" @click="clickPark(item)">
          {{ item.code }}
          <br>
          <span v-if="Object.keys(item.order).length > 0" style="font-size: smaller;">
            <p>{{ item.order.type }}</p>
            <p v-if="item.order.startTime">{{ item.order.startTime }}</p>
            <p v-if="item.order.endTime">{{ item.order.endTime }}</p>
            <p>{{ item.user.number }}</p>
          </span>
        </li>
      </ul>
    </div>
    <el-dialog
        :visible.sync="dialogVisible"
        title="信息"
        width="40%">
      <el-dialog
          width="30%"
          title="添加"
          :visible.sync="innerVisible"
          append-to-body>
        <p>
          <el-select v-model="form.userId">
            <el-option v-for="(user, index) in users.values()" :label="user.number" :value="user.id"></el-option>
          </el-select>
        </p>
        <p>
          <el-select v-model="form.type">
            <el-option label="临时车主" value="临时车主"></el-option>
            <el-option label="固定车主" value="固定车主"></el-option>
          </el-select>
        </p>
        <p>
          <el-button type="primary" @click="submitBtn">提交</el-button>
        </p>
      </el-dialog>
      <div v-if="dialogValue.order && dialogValue.order.userId">
        <p>{{ dialogValue.user.username }}</p>
        <p>{{ dialogValue.user.number }}</p>
        <p>{{ dialogValue.order.type }}</p>
        <p>{{ dialogValue.order.startTime }}</p>
        <p>{{ dialogValue.order.endTime }}</p>
        <span slot="footer" class="dialog-footer">
          <el-button type="warning" @click="editBtn(dialogValue)">修改</el-button>
          <el-button type="danger" @click="outOfStock(dialogValue)">删除</el-button>
        </span>
      </div>
      <div v-else>
        <p>空闲中</p>
        <p>
          <el-button type="primary" @click="addBtn(dialogValue)">添加</el-button>
        </p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: 'Order',
  data() {
    return {
      orderList: [],
      orders: new Map(),
      users: new Map(),
      mapA: [],
      mapB: [],
      mapC: [],
      type: "",
      form: {
        userId: "",
        type: "",
        code: "",
      },
      dialogVisible: false,
      innerVisible: false,
      dialogValue: {
        order: {},
        user: {},
      },
    }
  },
  async mounted() {
    this.getDataList();
  },
  methods: {
    clickPark(item) {
      this.dialogVisible = true;
      this.dialogValue = item;
    },
    async getDataList() {
      this.orders = new Map();
      await axios.get("/order/").then(res => {
        this.orderList = res.data;
        res.data.forEach(v => {
          this.orders.set(v.code, v);
        });
      });

      this.users = new Map();
      await axios.get("/user/?type=user").then(res => {
        res.data.forEach(v => {
          this.users.set(v.id, v);
        });
      });
      this.mapA = this.getData("A", 10);
      this.mapB = this.getData("B", 16);
      this.mapC = this.getData("C", 10);
    },
    getData(type, length) {
      let arr = [];
      for (let i = 1; i <= length; i++) {
        let code = type + i;
        let item = {
          code: code,
          order: {},
          user: {},
        }
        let var1 = this.orders.get(code);
        if (var1) {
          item.order = var1;
          item.user = this.users.get(var1.userId);
        }
        arr.push(item);
      }
      return arr;
    },
    outOfStock(v) {
      let now = this.getCountdown(v.order.startTime);
      let money = this.getInervalHour(new Date(), new Date(v.order.startTime)) * 2;
      this.$confirm(`当前停车时长为 ${now}， 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (v.order.type == "临时车主") {

        }
        axios.delete("/order/" + v.order.id).then(res => {
          console.log(res);
        }).catch(err=> {
          console.log(err);
        });

        let log = v.order;
        delete log.id;
        log.endTime = this.getNowDate();
        log.money = money;
        log.type = "管理员删除";
        axios.post("/log/", log).then(res => {
          console.log(res);
        })
        this.dialogVisible = false;
        this.$message({
          type: 'success',
          message: '操作成功!'
        });
        this.getDataList();
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });
    },
    warehousing() {

    },
    getNowDate() {
      return (new Date(+new Date() + 8 * 3600 * 1000)).toISOString().replace("T", " ").substring(0, 19);
    },
    getCountdown(date) {
      // 目标日期时间戳
      const end = Date.parse(new Date(date))
      // 当前时间戳
      const now = Date.parse(new Date())
      // 相差的毫秒数
      const msec = Math.abs(end - now)
      // 计算时分秒数
      let day = parseInt(msec / 1000 / 60 / 60 / 24)
      let hr = parseInt(msec / 1000 / 60 / 60 % 24)
      let min = parseInt(msec / 1000 / 60 % 60)
      let sec = parseInt(msec / 1000 % 60)
      // 个位数前补零
      hr = hr > 9 ? hr : '0' + hr
      min = min > 9 ? min : '0' + min
      sec = sec > 9 ? sec : '0' + sec
      // 控制台打印
      return `${day}天 ${hr}小时 ${min}分钟 ${sec}秒`;
      // 一秒后递归
      /*setTimeout(function () {
        vm.getCountdown(date);
      }, 1000)*/
    },
    getInervalHour(startDate, endDate) {
      var ms = Math.abs(endDate.getTime() - startDate.getTime());
      return Math.floor(ms / 1000 / 60 / 60);
    },
    addBtn(v) {
      delete this.form.id;
      this.innerVisible = true;
      this.form.startTime = this.getNowDate();
      this.form.code = v.code;
    },
    editBtn(v) {
      this.innerVisible = true
      this.form.id = v.order.id;
      this.form.userId = v.order.userId
      this.form.code = v.code
      this.form.type = v.order.type
    },
    submitBtn() {
      let flag = false;
      if (!this.form.id) {
        for (let i = 0; i < this.orderList.length; i++) {
          if (this.orderList[i].userId == this.form.userId) {
            flag = true;
            break;
          }
        }
      }

      if (flag) {
        this.$message.error("该用户已存在");
        return false;
      }
      axios.post("/order/", this.form).then(res=>{
        this.getDataList();
        this.dialogVisible= false
        this.innerVisible= false
      });
    }
  }
}
</script>

<style scoped>
.map {
  width: 1200px;
  margin: 20px auto;
  height: 700px;
  border: 1px solid #C0C4CC;
  background-image: url("../../assets/mapbg.png");
}

.home ul {
  list-style-type: none;
  margin-top: 40px;
  margin-left: 41px;
}

.home ul:first-child {
  margin-top: 20px;
}

.home ul li {
  float: left;
  display: inline-block;
  width: 90px;
  height: 120px;
  border: 1px solid #C0C4CC;
  margin: 10px;
  background: #05D914;
  cursor: pointer;
}

.home li p {
  /*height: 10px;
  line-height: 10px;*/
}

.home .red {
  background: #D10D14;
}

.home .ulB {
  margin-left: 153px;
  margin-right: 113px;
}
</style>